// 耗材管理
<template>
  <div class="equipment labBox">
    <laboratoryRightHeader
      :title="'耗材列表'"
      @outlabValue="(event) => (formData.cabinetName = event)"
      :width="100"
      :placeholder="' 请输入耗材名称'"
    ></laboratoryRightHeader>
    <div class="table">
      <div class="tableDetail flex-common">
        <div class="detailIntem mr-38 fs-14 cr-hui3">
          耗材柜总数 <span class="familyD fs-18 cr-main ml-12 mr-6">5</span>
          <span class="cr-hui4 fs-12">台</span>
        </div>
        <div class="detailIntem mr-38 cr-hui3">
          累计入库（采购）量
          <span class="familyD fs-18 cr-main ml-12 mr-6">200</span>
          <span class="cr-hui4 fs-12">kg</span>
        </div>
        <div class="detailIntem mr-38">
          累计出库（使用）量
          <span class="familyD fs-18 cr-red ml-12 mr-6">100</span>
          <span class="cr-hui4 fs-12">kg</span>
        </div>
        <div class="detailIntem mr-38">
          库存量 <span class="familyD fs-18 cr-huang ml-12 mr-6">100</span>
          <span class="cr-hui4 fs-12">kg</span>
        </div>
      </div>
      <mergeTable :tableData="tableList" :tableConfig="config">
        <el-table-column
          slot="index"
          align="center"
          type="index"
          label="序号"
        ></el-table-column>
        <el-table-column align="center" label="设备状态" slot="equipmentType">
          <template slot-scope="{ row }">
            <span
              class="fs-12"
              :style="{
                color: tableCommonMethod.getOnlineColor(row.equipmentType),
              }"
              >{{ tableCommonMethod.getOnlineStatus(row.equipmentType) }}</span
            >
          </template>
        </el-table-column>
        <el-table-column align="center" label="入库记录" slot="warehousing">
          <template slot-scope="{ row }">
            <div
              class="fs-12 cr-main cursor flex-column"
              @click="warehousingDialog(row)"
            >
              查看
              <div class="lookline"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="库存试剂" slot="stock">
          <template slot-scope="{ row }">
            <div
              class="fs-12 cr-main cursor flex-column"
              @click="stockDialog(row)"
            >
              查看
              <div class="lookline"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="领用记录" slot="receive">
          <template slot-scope="{ row }">
            <div
              class="fs-12 cr-main cursor flex-column"
              @click="receiveDialog(row)"
            >
              查看
              <div class="lookline"></div>
            </div>
          </template>
        </el-table-column>
        <el-table-column align="center" label="维护记录" slot="maintain">
          <template slot-scope="{ row }">
            <div
              class="fs-12 cr-main cursor flex-column"
              @click="maintainDialog(row)"
            >
              查看
              <div class="lookline"></div>
            </div>
          </template>
        </el-table-column>
      </mergeTable>
      <paging @onPage="onPage" @onNum="onNum" :total="total" />
    </div>
    <!-- 入库记录弹窗 -->
    <tableDialog
      :dialogTableVisible="warehousing.warehousingTableDialog"
      :total="warehousing.total"
      :exportInterfaceName="'exportWarehousing'"
      :formData="'formData'"
      :eventName="'getwarehousingList'"
      :title="'入库记录'"
      :type="'datetimerange'"
      :showInput="true"
      :tableTimeValue="tableTimeValue"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      :placeholder="warehousing.placeholder"
      @outValue="(event) => (tableTimeValue = event)"
      @outInputValue="(event) => (formData.reagentName = event)"
      @close="
        (event) => {
          warehousing.warehousingTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable
          :tableData="warehousing.table"
          :tableConfig="warehousing.config"
        >
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="存放位置" slot="floorNum">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getfloorNumStatus(row.floorNum)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
    <!-- 库存试剂弹窗 -->
    <tableDialog
      :total="stock.total"
      :title="'入库记录'"
      :type="'datetimerange'"
      :placeholder="stock.placeholder"
      :dialogTableVisible="stock.stockTableDialog"
      :exportInterfaceName="'exportInStock'"
      :formData="'formData'"
      :eventName="'getwarehousingList'"
      :showInput="true"
      :tableTimeValue="tableTimeValue"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      @outValue="(event) => (tableTimeValue = event)"
      @outInputValue="(event) => (formData.reagentName = event)"
      @close="
        (event) => {
          stock.stockTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable :tableData="stock.table" :tableConfig="stock.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="存放位置" slot="floorNum">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getfloorNumStatus(row.floorNum)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
    <!-- 领用记录弹窗 -->
    <tableDialog
      :dialogTableVisible="receive.receiveTableDialog"
      :total="receive.total"
      :title="'领用记录'"
      :type="'datetimerange'"
      :placeholder="receive.placeholder"
      :exportInterfaceName="'requisitionexport'"
      :formData="'formData'"
      :eventName="'getconsumablesRequisition'"
      :showInput="true"
      :tableTimeValue="tableTimeValue"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      @outValue="(event) => (tableTimeValue = event)"
      @outInputValue="(event) => (formData.reagentName = event)"
      @close="
        (event) => {
          receive.receiveTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable :tableData="receive.table" :tableConfig="receive.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
          <el-table-column align="center" label="是否归还" slot="isReturn">
            <template slot-scope="{ row }">
              <span class="fs-12">{{
                tableCommonMethod.getIsReturnStatus(row.isReturn)
              }}</span>
            </template>
          </el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
    <!-- 维护记录弹窗 -->
    <tableDialog
      :dialogTableVisible="maintain.maintainTableDialog"
      :title="'维护记录'"
      :text="`累计维修次数：${formData.findCount}次`"
      :total="maintain.total"
      :type="'datetimerange'"
      :uploadTrue="false"
      :diaPageNum="formData.diaPageNum"
      :diaPageSize="formData.diaPageSize"
      :formData="'formData'"
      :eventName="'getequipmentMaintain'"
      :tableTimeValue="tableTimeValue"
      @outValue="(event) => (tableTimeValue = event)"
      @outOptionValue="(event) => (formData.eventType = event)"
      @close="
        (event) => {
          maintain.maintainTableDialog = event;
        }
      "
    >
      <template #table>
        <mergeTable :tableData="maintain.table" :tableConfig="maintain.config">
          <el-table-column
            slot="index"
            align="center"
            type="index"
            label="编号"
          ></el-table-column>
        </mergeTable>
      </template>
    </tableDialog>
  </div>
</template>

<script>
import {
  laboratoryConsumablesConfig,
  laboratoryConsumablesWarehousingConfig,
  laboratoryConsumablesStockConfig,
  laboratoryConsumablesReceiveConfig,
  laboratoryConsumablesMaintainConfig,
} from "@/jsonData/table";
import {
  selectList,
  warehousingList,
  consumablesRequisition,
  equipmentMaintainfindCount,
  equipmentMaintain,
} from "@/http/api";
import tableCommonMethod from "@/utils/tableCommonMethod.js";
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";

export default {
  computed: {
    ...mapState({
      facultyNo: (state) => state.laboratory.facultyNo,
      laboratoryNo: (state) => state.laboratory.laboratoryNo,
      collegeNo: (state) => state.laboratory.collegeNo,
    }),
  },
  name: "consumables",
  data() {
    return {
      tableCommonMethod: tableCommonMethod,
      value: "",
      total: 0,
      tableList: [],
      config: laboratoryConsumablesConfig,
      warehousing: {
        warehousingValue: "",
        placeholder: "请输入试剂名称或者入库人",
        warehousingTableDialog: false,
        table: [],
        config: laboratoryConsumablesWarehousingConfig,
        total: 0,
      },

      stock: {
        showTime: false,
        stockValue: "",
        placeholder: "请输入试剂名称",
        stockTableDialog: false,
        table: [],
        config: laboratoryConsumablesStockConfig,
        total: 0,
      },
      receive: {
        receiveValue: "",
        placeholder: "请输入试剂名称或者领用人",
        receiveTableDialog: false,
        table: [],
        config: laboratoryConsumablesReceiveConfig,
        total: 0,
      },
      maintain: {
        maintainTableDialog: false,
        table: [],
        config: laboratoryConsumablesMaintainConfig,
        total: 0,
      },
      formData: {
        equipmentType: 2,
        cabinetName: "",
        equipmentName: "",
        reagentName: "",
        pageNum: 1,
        diaPageNum: 1,
        diaPageSize: 10,
        pageSize: 10,
        starttime: "",
        lasttime: "",
        equipmentNo: "",
        user: "",
        eventType: "",
        type: "",
        findCount: "",
        createBy: "",
      },
      tableTimeValue: [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ],
    };
  },
  mounted() {
    // this.initSearchAll();
    this.initSelectList();
  },
  methods: {
    /* 设备不同状态对应的数量 */
    async initSearchAll() {
      let res = await searchAll({
        equipmentType: this.formData.equipmentType,
        facultyNo: this.facultyNo,
        laboratoryNo: this.laboratoryNo,
      });
      if (res.code === 20000) {
        this.deviceStatus = res.data;
      }
    },
    // 公用一个接口，根据 equipmentType 设备类型来区分
    async initSelectList() {
      let params = {
        collegeNo: this.collegeNo,
        facultyNo: this.facultyNo,
        laboratoryNo: this.laboratoryNo,
        equipmentType: this.formData.equipmentType,
        equipmentName: this.formData.equipmentName,
        cabinetName: this.formData.cabinetName,
        pageNum: this.formData.pageNum,
        pageSize: this.formData.pageSize,
      };
      let res = await selectList(params);
      if (res.code === 20000) {
        this.tableList = res.data.rows;
        this.total = res.data.total;
      }
    },
    onPage(val) {
      this.formData.pageSize = val;
      this.initSelectList();
    },
    onNum(val) {
      this.formData.pageNum = val;
      this.initSelectList();
    },
    // 入库记录
    warehousingDialog(row) {
      this.reset();
      this.formData.type = "warehousing";
      this.formData.equipmentNo = row.equipmentNo;
      this.formData.createBy = row.createBy;
      this.warehousing.warehousingTableDialog = true;
      this.getwarehousingList();
    },
    // 入库记录或者库存试剂弹窗列表
    async getwarehousingList() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        starttime: this.formData.starttime,
        lasttime: this.formData.lasttime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        createBy: this.formData.createBy,
        reagentName: this.formData.reagentName,
      };
      let res = await warehousingList(params);
      if (res.code === 20000) {
        if (this.formData.type === "warehousing") {
          this.warehousing.table = res.data.rows;
          this.warehousing.total = res.data.total;
        } else {
          this.stock.table = res.data.rows;
          this.stock.total = res.data.total;
        }
      }
    },
    // 库存试剂
    stockDialog(row) {
      this.reset();
      this.formData.type = "stock";
      this.formData.equipmentNo = row.equipmentNo;
      this.formData.createBy = row.createBy;
      this.stock.stockTableDialog = true;
      this.getwarehousingList();
    },
    // 领用记录
    receiveDialog(row) {
      this.reset();
      this.formData.type = "receive";
      this.formData.equipmentNo = row.equipmentNo;
      this.formData.createBy = row.createBy;
      this.receive.receiveTableDialog = true;
      this.getconsumablesRequisition();
    },
    // 领用记录弹窗列表
    async getconsumablesRequisition() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        starttime: this.formData.starttime,
        lasttime: this.formData.lasttime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        createBy: this.formData.createBy,
        reagentName: this.formData.reagentName,
      };
      let res = await consumablesRequisition(params);
      if (res.code === 20000) {
        this.receive.table = res.data.rows;
        this.receive.total = res.data.total;
      }
    },
    // 维护记录
    maintainDialog(row) {
      this.reset();
      this.formData.type = "maintain";
      this.maintain.maintainTableDialog = true;
      this.formData.equipmentNo = row.equipmentNo;
      this.initfindCount();
      this.getequipmentMaintain();
    },
    /* 设备不同状态对应的数量 */
    async initfindCount() {
      let params = {
        user: this.formData.user,
        equipmentNo: this.formData.equipmentNo,
      };
      let res = await equipmentMaintainfindCount(params);
      if (res.code === 20000) {
        this.formData.findCount = res.data;
      }
    },
    // 维护记录弹窗列表
    async getequipmentMaintain() {
      let params = {
        equipmentNo: this.formData.equipmentNo,
        starttime: this.formData.starttime,
        lasttime: this.formData.lasttime,
        pageNum: this.formData.diaPageNum,
        pageSize: this.formData.diaPageSize,
        user: this.formData.user,
      };
      let res = await equipmentMaintain(params);
      if (res.code === 20000) {
        this.maintain.table = res.data.rows;
        this.maintain.total = res.data.total;
      }
    },
    // 初始化时间和页码
    reset() {
      let originTimeValue = [
        new Date(new Date().getTime() - 24 * 3600 * 1000 * 60),
        new Date(),
      ];
      this.formData.diaPageNum = 1;
      this.formData.diaPageSize = 10;
      this.formData.starttime = this.$getTime(originTimeValue[0], true);
      this.formData.lasttime = this.$getTime(originTimeValue[1], true);
      this.tableTimeValue = originTimeValue;
    },
  },
  watch: {
    tableTimeValue: {
      handler(val) {
        this.formData.starttime = val[0];
        this.formData.lasttime = val[1];
        switch (this.formData.type) {
          case "warehousing":
            this.getwarehousingList();
            break;
          case "stock":
            this.getwarehousingList();
            break;
          case "receive":
            this.getconsumablesRequisition();
            break;
          case "maintain":
            this.getequipmentMaintain();
            break;
        }
      },
      deep: true,
    },
    "formData.reagentName": {
      handler(val) {
        switch (this.formData.type) {
          case "warehousing":
            this.getwarehousingList();
            break;
          case "stock":
            this.getwarehousingList();
            break;
          case "receive":
            this.getconsumablesRequisition();
            break;
        }
      },
      deep: true,
    },
    "formData.cabinetName": {
      handler(val) {
        this.initSelectList();
      },
      deep: true,
    },
    laboratoryNo(val) {
      this.initSelectList();
    },
  },
};
</script>

<style lang="scss" scoped>
.equipment {
  .table {
    padding: 0px 24px;
    .tableDetail {
      height: 64px;
    }
    .bottom-wrap {
      left: 48px !important;
      right: 48px !important;
      position: absolute;
      bottom: 20px;
    }
  }
}
</style>